<template>
    <uni-popup ref="popup" type="bottom" @change="closePopup">
        <view class="upfile"  data-tar="addModal">
            <view class="up-file-title">手机上传</view>
            <view class="up-file-type">
                <view @tap="chooseImg">
                    <view>
                        <image class="iconfont" mode="scaleToFill" :src="`${imgUrl}/cloud/JPGPNG.png`"></image>
                    </view>
                    <view>本地照片</view>
                </view>
                <view @tap="chooseVideo">
                    <view>
                        <image class="iconfont" mode="scaleToFill" :src="`${imgUrl}/cloud/AVIMOV.png`"></image>
                    </view>
                    <view>本地视频</view>
                </view>
                <view @tap="chooseMessageFile">
                    <view>
                        <image class="iconfont" mode="scaleToFill" :src="`${imgUrl}/cloud/all.png`"></image>
                    </view>
                    <view>微信文件</view>
                </view>
            </view>
        </view>
    </uni-popup>
</template>

<script>
	export default {
        name: 'UniPhoneUpload',
        props:{
            imgNum: {
                type: Number,
				default: 9
            }
        },
		data() {
			return {
                tools: this.$tools,
                imgUrl: this.$CDNURL.IMGURL,
                showPopup: false
			}
        },
        watch:{
            showPopup (val) {
                if(val){
                    this.$refs.popup.open()
                }else{
                    this.$refs.popup.close()
                }   
            }
        },
		methods: {
            closePopup(res){
                if(!res.show){
                    this.showPopup = res
                }
            },
            // 本地照片
            chooseImg() {
                 var _this = this;
                 uni.chooseImage({
                    count: this.imgNum, // 默认9 
                    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                    success: function (res) {
                        _this.$emit('chooseImg',res);
                    }
                })
            },
            // 本地视频
            chooseVideo() {
                var _this = this;
                uni.chooseVideo({
                    count: 1,
                    sourceType: ['camera', 'album'],
                    success: function (res) {
                        if (res.size > 500 * 1048576) {   //最大不能超过500m
                            uni.showModal({
                                title: '温馨提示',
                                showCancel: false,
                                content: '上传得文件不能大于500M',
                                confirmText: '知道了',
                                success: function (res) { }
                            });
                            return
                        }else{
                             _this.$emit('chooseVideo',res)
                        }                      
                    }
                });
            },
            // 微信文件
            chooseMessageFile() {
                var _this = this
                wx.chooseMessageFile({
                    count: 1,
                    success(res) {
                        if (res.tempFiles[0].type == 'file'){
                            if (res.tempFiles[0].size > 100 * 1048576) {   //最大不能超过100m
                                uni.showModal({
                                    title: '温馨提示',
                                    showCancel: false,
                                    content: '上传的文件不能大于100M',
                                    confirmText: '知道了'
                                });
                                return
                            }
                        }else {
                            if (res.tempFiles[0].size > 500 * 1048576) {   //最大不能超过500m
                                uni.showModal({
                                    title: '温馨提示',
                                    showCancel: false,
                                    content: '上传的文件不能大于500M',
                                    confirmText: '知道了'
                                });
                                return
                            }
                        }
                        _this.$emit('chooseMessageFile',res)
                    }
                })
                
            },
		}
	}
</script>

<style lang="scss" scoped>
.upfile {
    height: 328rpx !important;
    background: #fff;
    border-radius: 24rpx 24rpx 0 0;
    .up-file-title {
        font-size: 32rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #1C1C1C;
        text-align: center;
    }
    .up-file-type {
        display: flex;
        justify-content: space-around;
        >view {
            >view:nth-child(1) {
                width: 128rpx;
                height: 128rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 50%;
                background: #EEEFF3;
            }
            image {
                width: 56rpx;
                height: 56rpx;
            }
            >view:nth-child(2) {
                text-align: center;
                font-size: 26rpx;
                font-family: PingFang SC;
                font-weight: 400;
                color: rgba(122, 131, 141, 1);
                margin-top: 14rpx;
            }
        }
        &:nth-child(2) {
            margin-top: 45rpx;
            margin-bottom: 79rpx;
        }
    }
}
</style>
